<template>
  <div class="app-container">
    角色列表
    <!-- 表单表单 用来串联一起给后端的 各种查询的 -->
    <div class="search-div">
      <el-form :inline="true" :model="searchObj" class="demo-form-inline">
        <el-form-item label="角色名称">
          <el-input v-model="searchObj.roleName" placeholder="返现数据框提示的"></el-input>
        </el-form-item>
        <el-form-item label="角色编码">
          <el-input v-model="searchObj.roleCode" placeholder="返现数据框提示的"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="fetchData()">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button @click="resetData()">重置</el-button>
        </el-form-item>

      </el-form>
    </div>
    <div class="tools-div">
      <el-button type="primary" @click="add()">添加</el-button>
      <el-button type="danger" class="btn-add" @click="batchRemove()">批量删除</el-button>
    </div>
    <el-table :data="list" v-loading="listLoading" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection"></el-table-column>
      <el-table-column prop="id" label="角色ID" width="180"></el-table-column>
      <el-table-column prop="roleName" label="角色名称" width="180"></el-table-column>
      <el-table-column prop="roleCode" label="角色编码" width="180"></el-table-column>
      <el-table-column prop="description" label="描述" width="180"></el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
      <el-table-column prop="updateTime" label="更新时间" width="180"></el-table-column>
      <el-table-column label="操作" width="200" align="center">

        <!--  type="primary 设置按钮的类型
            icon="el-icon-edit" 按钮添加图标
            size="mini" 按钮的整体大小为迷你尺寸
            @click 是 Vue.js 中的事件绑定语法
            edit 当按钮被点击时会触发该方法，你可以根据需求自定义该方法的名称和具体逻辑
            scope.row.id 用于传递当前行数据的 id 值。 scope 是在 <template slot-scope="scope"> 中定义的作用域对象，scope.row 代表当前行的数据对象，scope.row.id 就是该数据对象中的 id 字段。
          -->
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" size="mini" @click="edit(scope.row.id)" title="修改" />
          <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeDataById(scope.row.id)" title="删除" />
        </template>
      </el-table-column>
    </el-table>
    <!--
      current-page="page" 当前页码（双向绑定变量）
      total 总记录数（必须为数字）
      page-size 每页显示的记录数

    -->
    <el-pagination :current-page="page" :total="total" :page-size="limit" style="padding: 30px 0;
    text-align: center;" layout="total, prev, pager, next, jumper" @current-change="fetchData" />

    <!-- <el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button> -->
    <div>
      <el-dialog title="修改/删除管理员信息" :visible.sync="dialogFormVisible">
        <el-form :model="sysRole">
          <el-form-item label="角色名称" label-width="100px" size="small">
            <el-input v-model="sysRole.roleName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="角色编码" label-width="100px" size="small"">
            <el-input v-model="sysRole.roleCode" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="角色描述" label-width="100px" size="small">
            <el-input v-model="sysRole.description" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveOrUpdate()">确 定</el-button>
        </div>
      </el-dialog>
    </div>

  </div>
</template>


<script>
import api from '@/api/system/sysRole'


export default {
  data() {  //这个地方可以认为是 所有需要初始化的字段或者变量  就是java的属性
    return {
      listLoading: true,
      list: [], // 表示获取角色列表的时候 初始化的一个对象list
      page: 1, //表示页码也是初始化的时候声明的
      limit: 5, //表示页大小 初始化声明
      searchObj: {}, // 初始化一个对象 这个对象 可以放相关的查询条件
      total: 0,// 初始化总记录数量
      sysRole: {}, // 初始化一个对象 用来装填实体对象
      dialogFormVisible: false, //意思是这个表单不显示
      multipleSelection: [],
      idList: [],
    }
  },
  //页面渲染之前获取数据
  created() { // 钩子函数 初始化后会被执行的一个函数
    // 页面进来就调用这个方法 所以会拿到初始化的数据 只有这个地方得时候 才会被赋值为1 否则就是页面在第几页就赋值第几页
    this.fetchData(1)
  },
  methods: { //具体的方法 各种互相绑定 传参
    resetData() {
      console.log('重置查询表单')
      this.searchObj = {}
      this.fetchData(1) // 在空调一次查询
    },
    fetchData(pageNum = 1) {
      // 更新当前页码
      this.page = pageNum
      console.log('角色列表数据:', JSON.stringify(this.searchObj));
      console.log('分页信息:', this.page, this.limit);
      api.getPageList(this.page, this.limit, this.searchObj)
        .then(response => {
          // 在 Vue 组件中打印原始数据
          // console.log('原始数据（非响应式）:', JSON.parse(JSON.stringify(response)));
          // 加载完成，将加载状态设置为 false
          this.listLoading = false;
          // 将响应数据中的记录赋值给 list
          this.list = response.data.records;
          // console.log('角色列表数据:', JSON.stringify(this.searchObj));
          // 将响应数据中的总记录数赋值给 total
          this.total = response.data.total;
        })
    },
    removeDataById(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return api.removeById(id);
      }).then(response => {
        this.fetchData(this.page);
        this.$message.success('删除成功' || response.message)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });;
    },
    edit(id) {
      console.log("修改对象弹框")
      this.dialogFormVisible = true,
        api.getById(id).then(response => {
          this.sysRole = response.data
        })
    },
    add() {
      console.log("添加对象弹框")
      this.dialogFormVisible = true,
        this.sysRole = {}
    },
    saveOrUpdate() { // 根据id来判断是更新还是新增
      if (!this.sysRole.id) {
        this.save()
      } else {
        this.update()
      }
    },
    update() {
      this.sysRole.updateTime = null
      console.log("修改对象方法", JSON.stringify(this.sysRole))
      api.update(this.sysRole).then(response => {
        this.dialogFormVisible = false
        this.fetchData(this.page)
        this.$message.success('修改操作成功' || response.message)

      })
    },
    save() {
      console.log("新增对象方法")
      api.save(this.sysRole).then(response => {
        this.$message.success('新增操作成功')
        this.dialogFormVisible = false
        this.fetchData(this.page)
      })
    },
    handleSelectionChange(val) {
      // console.log("拿到的值是 ", JSON.stringify(val))
      this.idList = []
      this.multipleSelection = val;
      for (let element of this.multipleSelection) {
        this.idList.push(element.id)
      }
      // console.log("拿到的值id是 ", JSON.stringify(this.idList))
    },
    batchRemove() {
      if (this.idList.length == 0) {
        this.$message.warning('请选择要删除的记录！')
        return
      }

      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log("拿到的值id是 ", JSON.stringify(this.idList))
        return api.batchRemove(this.idList);
      }).then(response => {
        this.fetchData(this.page);
        this.$message.success('删除成功' || response.message)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });;


    },
  }
}
</script>
